<!--
 * @Author: wuzhen
 * @Date: 2019-01-23 13:53:08
 * @LastEditors  : wuzhen
 * @LastEditTime : 2019-12-30 15:38:12
 * @Description: table表格编辑组件
 -->
<template>
  <Form :model="formData" ref="formData" :rules="ruleValidate" :label-width="labelWidth">
    <Input type="password" style="height:0px;overflow:hidden" />
    <Row :gutter="32" v-for="(form, index) in formProps" :key="index">
      <Col v-for="(item, key) in form.forms" :key="key" :span="item.span?item.span: '12'">
      <slot :name="item.key" :item="item" v-if="item.slot"></slot>
      <FormItem :label="item.label" :prop="item.key" :rules="item.rules" v-else>
        <!-- InputNumber类型 -->
        <template v-if="item.type=='InputNumber'">
          <InputNumber v-model="formData[item.key]" :placeholder="item.placeholder" style="width:100%"></InputNumber>
        </template>
        <!-- DatePicker类型 -->
        <template v-else-if="item.type=='date' || item.type=='datetime' || item.type === 'datetimerange'">
          <DatePicker :type="item.type" v-model="formData[item.key]" :placeholder="item.placeholder" style="width: 100%" @on-change="(e) => $emit('on-change', item.key, e)"></DatePicker>
        </template>
        <!-- radio类型 -->
        <template v-else-if="item.type=='radio'">
          <RadioGroup v-model="formData[item.key]" style="width: 100%" @on-change="$emit('on-change', item.key, formData[item.key])">
            <Radio :disabled="formData['disabled'] && item.editDisabled" v-for="child in item.options.data" :border="child.border" :key="child.value" :label="child.value">{{child.label}}</Radio>
          </RadioGroup>
        </template>
        <!-- checkbox 类型 -->
        <template v-else-if="item.type=='checkbox'">
          <CheckboxGroup v-model="formData[item.key]" style="width:100%" @on-change="$emit('on-change', item.key, formData[item.key])">
            <Checkbox v-for="child in item.options.data" :key="child.value" :label="child.value">
              <span>{{child.label}}</span>
            </Checkbox>
          </CheckboxGroup>
        </template>
        <!-- select类型 -->
        <template v-else-if="item.type=='select'">
          <Select v-model="formData[item.key]" :placeholder="item.placeholder" :clearable="item.clearable" :disabled="formData['disabled'] && item.editDisabled" style="100%" @on-change="$emit('on-change', item.key, formData[item.key])">
            <Option v-for="child in item.options.data" :value="child.value" :key="child.value" :label="child.label"></Option>
          </Select>
        </template>
        <!-- Switch类型 -->
        <template v-else-if="item.type=='Switch'">
          <div style="width:100%;display: inline-block;overflow: hidden;">
            <i-switch v-model="formData[item.key]" size="large">
              <span slot="open">开启</span>
              <span slot="close">关闭</span>
            </i-switch>
          </div>
        </template>
        <!-- number类型 -->
        <template v-else-if="item.type=='number'">
          <Input type="number" v-model.number="formData[item.key]" :placeholder="item.placeholder" :disabled="formData['disabled'] && item.editDisabled">
          <span slot="prepend" v-if="item.prepend">{{item.prepend}}</span>
          <span slot="append" v-if="item.append">{{item.append}}</span>
          </Input>
        </template>
        <!-- 默认为input类型 -->
        <template v-else>
          <Input :type="item.type?item.type:'text'" :rows="item.row || 4" v-model="formData[item.key]" :placeholder="item.placeholder" :disabled="formData['disabled'] && item.editDisabled" :show-word-limit="item.showLimit" :maxlength="item.maxlength || 40">
          <span slot="prepend" v-if="item.prepend">{{item.prepend}}</span>
          <span slot="append" v-if="item.append">{{item.append}}</span>
          </Input>
        </template>
      </FormItem>
      </Col>
    </Row>
    <slot />
  </Form>
</template>

<script>
export default {
  props: {
    // 表格标题
    labelWidth: {
      type: Number,
      default: 80
    },
    formProps: {
      type: Array,
      default: () => {}
    },
    // 新增表单默认值
    formObj: {
      type: Object,
      default: () => {}
    },
    // 验证规则
    ruleValidate: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      formData: Object.assign({}, this.formObj)
    };
  },
  methods: {
    // slot值获取
    setValue(key, value) {
      this.formData[key] = value;
    },
    // 表单验证
    validate() {
      return new Promise(resolve => {
        this.$refs["formData"].validate(valid => {
          resolve({
            ...{
              formData: this.formData,
              valid: valid
            }
          });
        });
      });
    }
  }
};
</script>

<style lang="less" scoped>
</style>
